<script setup>
	import {
		ref,
		computed,
		reactive,
		onMounted
	} from 'vue';
	import {
		onLoad,
		onShow,
		onHide,
		onUnload
	} from '@dcloudio/uni-app';
	import {
		Audio
	} from '/utils/audio.js';
	import {
		list
	} from '../../utils/yinbiao.js';
	import {
		seeTokeApi
	} from '../../api/request.js';
	// 1美 2英
	const type = ref(2);
	const fayin = ref(1);
	const audio = ref(null);
	audio.value = new Audio();
	const clears = () => {
		uni.$off('playend');
		uni.$emit('pause');
		uni.$emit('time');
		audio.value.dele();
		audio.value = null;
		demoVideo.value = null
	}
	onUnload(() => {
		clears()
	});
	onHide(() => {
		clears()
	});
	onShow(() => {
		if (uni.getStorageSync('bofangmoshi')) {
			type.value = uni.getStorageSync('bofangmoshi');
		}
		if (!audio.value) {
			uni.navigateBack();
		}
	});
	const props = defineProps({});
	let platform = uni.getStorageSync('platform');
	const bofangzhong = ref(false);
	onMounted(() => {
		uni.$on('playend', () => {
			selectIndex.value = null;
			bofangzhong.value = false;
		});
		uni.$on('time', (value) => {
			console.log(value);
			//实时播放的进度
			if (urlss.value) {
				selectIndex.value = info.value[
					kuaimana.value == 1 ? 'speech_point' : 'split_speech_point'
				][urlss.value].findIndex((item) => value * 1000 < item.s + item.d);
			}
		});
	});
	const info = ref({});

	onLoad(async (e) => {
		let res = await seeTokeApi({
			word: e.id
		});
		info.value = res.data;
		console.log(info.value);
		play();
	});
	const goback = () => {
		uni.navigateBack();
	};
	const current = ref(0);
	const fenge = ref(false);
	const changeSwiperCurrent = (e) => {
		showCuowu.value = 3;
		pinduList.value = [];
		showTishi.value = false;
		value.value = '';
		fenge.value = false;
		if (typeof e === 'number' && !isNaN(e)) {
			current.value = e;
		} else {
			current.value = e.detail.current;
		}
	};
	const sonSwiper = ref(0);
	const changeSonSwiper = (e) => {
		selectIndex.value = null;
		sonSwiper.value = e.detail.current;
	};
	// 默认单词
	const play = (start, end, url = info.value.audio_file_name.word) => {
		let http =
			type.value == 1 ?
			'https://static.jtsee.com/app_media/words_mp3_v2/us/aria_word/' :
			'https://static.jtsee.com/app_media/words_mp3_v2/gb/ryan_word/';
		bofangzhong.value = true;
		uni.$emit('playAudio', http + `${url}`, true, start, end);
	};
	// 拆分的
	const playSplitAudio = (start, end) => {
		bofangzhong.value = false;
		let url =
			type.value == 1 ?
			'https://static.jtsee.com/app_media/words_mp3_v2/us/aria_split/' :
			'https://static.jtsee.com/app_media/words_mp3_v2/gb/ryan_split/';
		uni.$emit('playAudio', info.value.word == 'subsequent' ? '/static/danci/subsequent.mp3' : url + info.value
			.audio_file_name.split, true, start, start + end);
	};
	const returnText = (arr) => {
		let str = '';
		arr.forEach((item) => {
			str += info.value?.word[item];
		});
		return str;
	};
	const selectBiao = ref('');
	const playbiao = (e) => {
		bofangzhong.value = false;
		console.log(e);
		console.log('g');
		audio.value.end();
		selectBiao.value = e.split('_')[0];
		console.log(selectBiao.value);
		let index = list.findIndex((item) => Object.keys(item)[0] === e);
		if (index !== -1) {
			let audioPath = `/static/yinbiao/${list[index][Object.keys(list[index])[0]]}`;
			console.log(audioPath);
			audio.value.play(audioPath);
		} else {
			console.error('未找到匹配的音标');
		}
	};
	const center = ref(null);
	const demoVideo = ref(null);
	const showVideo = (e) => {
		if (selectBiao.value) {
			center.value = true;
			demoVideo.value = uni.createVideoContext('demoVideo');
			status.value = 2;
		}
	};
	/**
	 * statis 1播放
	 * status 2是透明
	 * status 3是暂停
	 */
	const status = ref(2);
	const timer = ref(null);
	// dianji函数根据stauts的值进行不同的操作
	const dianji = () => {
		if (status.value == 2) {
			status.value = 3;
			timer.value = setTimeout(() => {
				status.value = 2;
				clearTimeout(timer.value);
				timer.value = null;
			}, 1500);
		}
	};
	const plays = () => {
		if (timer.value) {
			clearTimeout(timer.value);
			timer.value = null;
		}
		demoVideo.value.play();
		status.value = 3;
		timer.value = setTimeout(() => {
			status.value = 2;
			clearTimeout(timer.value);
			timer.value = null;
		}, 1500);
	};
	const playTuo = () => {
		try {
			if (timer.value) {
				clearTimeout(timer.value);
				timer.value = null;
			}
			status.value = 1;
			demoVideo.value.pause();
		} catch (e) {
			console.log(e);
		}
	};
	const guanbi = () => {
		demoVideo.value.pause();
		demoVideo.value = null;
		center.value = false;
	};

	// 拼读
	const showCuowu = ref(3);
	const pinduList = ref([]);
	const change = (id) => {
		bofangzhong.value = false;
		const getSplitKeys = (split) => split.map((item) => Object.keys(item)).flat();
		const checkErrors = (arr, list) => {
			for (let i = 0; i < arr.length; i++) {
				if (arr[i] !== list[i]) {
					showCuowu.value = 1;
					throw new Error('错误188行');
				}
			}
			showCuowu.value = 2;
			current.value = 2;
		};
		let weizhi = info.value.s_split.findIndex((item) => Object.keys(item)[0] === id);
		let url =
			type.value == 1 ?
			'https://static.jtsee.com/app_media/words_mp3_v2/us/aria_split/' :
			'https://static.jtsee.com/app_media/words_mp3_v2/gb/ryan_split/';

		let start =
			type.value == 1 ?
			info.value.mySpeech_us_aria_split[weizhi + 1].s :
			info.value.mySpeech_en_ryan_split[weizhi + 1].s;
		let end =
			type.value == 1 ?
			info.value.mySpeech_us_aria_split[weizhi + 1].d :
			info.value.mySpeech_en_ryan_split[weizhi + 1].d;
		console.log(info.value.word == 'subsequent');
		uni.$emit('playAudio', info.value.word == 'subsequent' ? '/static/danci/subsequent.mp3' : url + info.value
			.audio_file_name.split, true, start, start + end);

		let num = pinduList.value.length;
		let arr = getSplitKeys(info.value?.s_split);

		if (info.value?.s_split.length === num) {
			return;
		}
		pinduList.value.push(id);
		if (info.value?.s_split.length === pinduList.value.length) {
			checkErrors(arr, pinduList.value);
		}
	};

	const shuffledSplit = computed(() => {
		if (info.value?.s_split) {
			return info.value?.s_split.slice().sort(() => Math.random() - 0.5);
		} else {
			return [];
		}
	});
	const chediao = () => {
		pinduList.value.pop();
		showCuowu.value = 3;
	};
	const value = ref('');
	const duima = (e) => {
		if (!value.value) {
			return;
		}
		if (value.value !== info.value.word) {
			showCuowu.value = 1;
			showTishi.value = true;
			fenge.value = true;
			return;
		}
		fenge.value = true;
		showTishi.value = false;
		showCuowu.value = 2;
	};
	const showTishi = ref(false);
	const danciListde = computed(() => {
		if (info.value && info.value?.s_split && value.value) {
			// 获取 arr 数组（每个单词）
			let arr = info.value?.s_split.map((item) => Object.keys(item)[0]);

			// 最终的结果数组
			let result = [];
			let startIndex = 0; // 记录当前字符串的起始位置

			// 遍历 arr 数组，处理每个单词
			arr.map((item, index) => {
				// 计算当前单词的长度
				let endIndex = startIndex + item.length;

				if (index === arr.length - 1) {
					result.push(value.value.slice(startIndex));
				} else {
					let wordSegment = value.value.slice(startIndex, endIndex);
					result.push(wordSegment);
				}
				startIndex = endIndex;
			});

			console.log('最终结果:', result);
			return result;
		} else {
			return '';
		}
	});
	const shuaxin = () => {
		showCuowu.value = 3;
		value.value = '';
		showTishi.value = false;
		fenge.value = false;
	};
	const indexs = ref(0);
	const selectIndex = ref(null);
	const urlss = ref('');
	let kuaimana = ref('');
	const playJuzi = (urls, type, suoyin) => {
		selectIndex.value = 0;
		urlss.value = urls;
		kuaimana.value = type;
		indexs.value = suoyin;
		// if (type == 2) {

		// }
		let url =
			type == 1 ?
			'https://static.jtsee.com/app_media/spoken_v1/us_jane/' :
			'https://static.jtsee.com/app_media/spoken_v1/us_jane/';
		uni.$emit('playAudio', `${url}${urlss.value}.mp3`, true);
	};
</script>

<template>
	<view class="wrap" :style="{
            height: platform.gaodu + 'rpx'
        }">
		<view class="header-wrap uni-row" :style="{
                paddingTop: platform.dingbu + 'rpx',
                height: platform.dingbu + 96 + 'rpx'
            }">
			<image class="left" src="/static/img/goback-black.png" @click="goback" mode="widthFix" />
			<view class="title"> 学练一体 </view>
			<image class="left" src="/static/img/goback-black.png" mode="widthFix" style="opacity: 0" />
		</view>
		<view class="select-wrap">
			<view class="top-slider uni-row">
				<image @click="changeSwiperCurrent(0)" :src="`/static/img/wolrd/icon${0 == current ? 1 : 2}.png`"
					mode="widthFix" class="icon">
				</image>
				<view class="xian" />
				<image @click="changeSwiperCurrent(1)" :src="`/static/img/wolrd/icon${1 == current ? 1 : 2}.png`"
					mode="widthFix" class="icon">
				</image>
				<view class="xian" />
				<image @click="changeSwiperCurrent(2)" :src="`/static/img/wolrd/icon${2 == current ? 1 : 2}.png`"
					mode="widthFix" class="icon">
				</image>
			</view>
			<view class="top-slider di uni-row">
				<view class="zi" v-for="(item, index) in ['拆分拼写', '自然拼读', '字母拼写']" :key="index"
					@click="changeSwiperCurrent(index)" :class="index == current ? 'active' : 'default'">
					{{ item }}
				</view>
			</view>
		</view>
		<swiper :current="current" :indicator-dots="false" @change="changeSwiperCurrent" :autoplay="false" :style="{
                height: platform.gaodu - platform.dingbu - 96 - 140 + 'rpx'
            }">
			<swiper-item>
				<scroll-view scroll-y="true" :style="{
                        height: platform.gaodu - platform.dingbu - 96 - 140 + 'rpx',
                        width: '750rpx'
                    }">
					<view class="" style="height: 16rpx"> </view>
					<view class="danci">
						<view class="danci-top uni-row">
							<view class="danci-bg yingwen">
								<text :class="index % 2 == 0 ? 'actives' : 'defaults'"
									v-for="(item, index) in info?.s_split" :key="index">
									{{ Object.keys(item)[0] }}
								</text>
							</view>
						</view>
						<view class="center uni-row" @click="play()">
							<view class="left uni-row">
								<view class="dancide yinbiao uni-row">
									/
									{{ type == 2 ? info?.uk : info?.us }}
									/
								</view>
								<image :src="`/static/img/${bofangzhong ? 'bofang' : 'huise'}.png`" mode="widthFix"
									class="huise"></image>
							</view>
						</view>
						<view class="label uni-row" style="justify-content: center">
							<view class="itemss" v-for="(item, index) in info?.tran_leci?.tran" :key="index">
								{{ item }}
							</view>
						</view>
						<view class="wai uni-row">
							<view class="footer uni-row">
								<view class="item uni-row" v-for="(item, index) in info?.s_split" :key="index" @click="
                                        playSplitAudio(
                                            type == 1
                                                ? info?.mySpeech_us_aria_split[index + 1].s
                                                : info?.mySpeech_en_ryan_split[index + 1].s,
                                            type == 1
                                                ? info?.mySpeech_us_aria_split[index + 1].d
                                                : info?.mySpeech_en_ryan_split[index + 1].d
                                        )
                                    " hover-class="yanse" hover-stay-time="300">
									{{ Object.keys(item)[0] }}
								</view>
							</view>
						</view>
					</view>
					<view class="pindus" v-if="info && info?.y_phonics && info?.y_phonics.length">
						<view class="title uni-row"> 自然拼读 </view>
						<view class="uni-row">
							<view class="left">
								<view class="list uni-row">
									<view class="item uni-row" v-for="(item, index) in info?.y_phonics" :key="index"
										:class="index % 2 == 0 ? 'active' : 'default'">
										{{ returnText(item.position) }}
									</view>
								</view>
								<view class="list uni-row">
									<view class="item xiao uni-row yinbiao" v-for="(item, index) in info?.y_phonics"
										:key="index" @click="playbiao(item.sound)" hover-class="yanse"
										hover-stay-time="300">
										/{{ item.sound.split('_')[0] }}/
									</view>
								</view>
							</view>
							<view :style="{ opacity: selectBiao ? 1 : 0 }" class="rights uni-row" @click="showVideo">
								<view class="uni-row zi yinbiao">
									{{ selectBiao ? `/${selectBiao}/` : '' }}
								</view>
								<image src="/static/img/shexiangji.png" class="she"></image>
							</view>
						</view>
					</view>
					<view class="pindus" v-if="info && info.s_stemAffix">
						<view class="title uni-row"> 词根助记 </view>
						<view class="liss uni-row">
							<view class="item uni-col">
								<view class="titles" v-if="info?.s_stemAffix.stem.detail">
									{{ info.s_stemAffix.stem.detail }}
								</view>
								<view class="labels">
									{{ info.s_stemAffix.stem.explain }}
								</view>
							</view>
							<view class="jia" v-if="info.s_stemAffix.prefix && info.s_stemAffix.prefix.detail">
								+
							</view>
							<view class="item uni-col" v-if="info?.s_stemAffix && info.s_stemAffix.prefix.detail">
								<view class="titles">
									{{ info.s_stemAffix.prefix.detail }}
								</view>
								<view class="labels">
									{{ info.s_stemAffix.prefix.explain }}
								</view>
							</view>
							<view class="jia" v-if="info.s_stemAffix && info.s_stemAffix.suffix.detail">
								+
							</view>
							<view class="item uni-col" v-if="info.s_stemAffix && info.s_stemAffix.suffix.detail">
								<view class="titles">
									{{ info.s_stemAffix.suffix.detail }}
								</view>
								<view class="labels">
									{{ info.s_stemAffix.suffix.explain }}
								</view>
							</view>
							<view class="jia"> = </view>
							<view class="item uni-col">
								<view class="titles">
									{{ info.word }}
								</view>
								<view class="labels uni-row">
									<view class="itemss">
										<!-- v-for="(item, index) in info?.tran_memo"
                                        :key="index" -->
										<!-- {{ item }} -->
										{{ info?.tran_memo[0] }}
									</view>
								</view>
							</view>
						</view>
						<view class="text-wrap">
							{{ info.s_stemAffix.explain }}
						</view>
					</view>
					<view class="pindus xindes">
						<view class="title uni-row"> 实用口语 </view>
						<swiper indicator-color="#D8D8D8" indicator-active-color="#9561F3" class="son-swiper"
							:indicator-dots="true" :autoplay="false" @change="changeSonSwiper">
							<swiper-item v-for="(item, index) in info?.spoken.slice().reverse()" :key="index">
								<view class="swiper-item">
									<view class="titltess uni-row" style="flex-wrap: wrap">
										<text v-for="(i, iIndex) in item.exampleEn.split(' ')" :key="iIndex" :class="
                                                iIndex == selectIndex && iIndex % 3 == 1
                                                    ? 'active'
                                                    : iIndex == selectIndex && iIndex % 3 == 0
                                                    ? 'default'
                                                    : iIndex == selectIndex && iIndex % 3 == 2? 'defaults':''
                                            ">{{ i }}</text>
									</view>
									<view class="labels"> {{ item.exampleCn }} </view>
									<view class="imgs uni-row">
										<view class="item uni-row" hover-class="yanse" hover-stay-time="300"
											@click="playJuzi(item.exampleId, 1, index)">
											<image src="/static/img/bofangne.png"></image>
										</view>
										<view style="width: 20rpx; height: 1rpx" class="itemss">
										</view>
										<view class="item uni-row ss" hover-class="yanse" hover-stay-time="300"
											@click="playJuzi(item.exampleId, 1, index)">
											<view class="neirong"> 慢 </view>
										</view>
										<!-- <view class="item uni-row" hover-class="yanse" hover-stay-time="300">
											<image src="/static/img/danhuatong.png"></image>
										</view> -->
									</view>
								</view>
							</swiper-item>
						</swiper>
					</view>
					<view class="" style="height: 16rpx"> </view>
				</scroll-view>
			</swiper-item>
			<swiper-item class="swiper-items">
				<view class="" style="height: 16rpx"> </view>
				<view class="xiamian" :style="{
                        height: platform.gaodu - platform.dingbu - 96 - 16 - 140 + 'rpx',
                        width: '750rpx'
                    }">
					<view class="headers uni-row" :class="showCuowu == 1 ? 'actuve' : showCuowu == 2 ? 'default' : ''">
						<view class="item" :class="index % 2 == 0 ? 'actives' : 'defaults'"
							v-for="(item, index) in info?.s_split" :key="index">
							{{ pinduList[index] }}
						</view>
					</view>
					<view class="label uni-row" style="justify-content: center">
						<view class="itemss" v-for="(item, index) in info?.tran_memo" :key="index">
							{{ item }}
						</view>
					</view>
					<view class="imss" @click="chediao">
						<image src="/static/img/wolrd/shanchu.png" class="shanchu"></image>
					</view>
					<view class="footer uni-row">
						<view class="item uni-row" :class="index % 2 == 0 ? 'actives' : 'defaults'"
							v-for="(item, index) in shuffledSplit" :key="index"
							@click="change(Object.keys(item)[0], item)" hover-class="yanse" hover-stay-time="300">
							{{ Object.keys(item)[0] }}
						</view>
						<view class="item" style="opacity: 0" v-for="(item, index) in 3 - (shuffledSplit.length % 3)"
							:key="index">
						</view>
					</view>
				</view>
			</swiper-item>
			<swiper-item class="swiper-items">
				<view class="" style="height: 16rpx"> </view>
				<view class="xiamian" :style="{
                        height: platform.gaodu - platform.dingbu - 96 - 16 - 140 + 'rpx',
                        width: '750rpx'
                    }">
					<image v-show="showCuowu == 1" @touchend.prevent="shuaxin" src="/static/img/shuaxin.png"
						class="labasss">
					</image>
					<template v-if="fenge">
						<view class="gaibainla uni-row" v-if="showCuowu != 2">
							<template v-for="(item, index) in danciListde" :key="index">
								<view style="font-size: 50rpx; font-weight: 600" :style="{
                                        color:
                                            item === Object.keys(info?.s_split[index])[0]
                                                ? '#5BD145'
                                                : '#EF4828'
                                    }">
									{{ item }}
								</view>
								<view :style="{
                                        color:
                                            item ===
                                            Object.keys(
                                                info?.s_split[index - 1 >= 1 ? index - 1 : 0]
                                            )[0]
                                                ? '#5BD145'
                                                : '#EF4828',
                                        fontWeight: '600',
                                        fontSize: '50rpx'
                                    }">
									{{ `${index == danciListde.length - 1 ? '' : '-'} ` }}
								</view>
							</template>
						</view>
						<view class="morebde uni-row" style="margin-top: 20rpx">
							<template v-for="(item, index) in info?.s_split" :key="index">
								<view style="color: #5bd145; font-weight: 600; font-size: 50rpx">
									{{ `${Object.keys(item)[0]}` }}
								</view>
								<view style="color: #5bd145; font-weight: 600; font-size: 50rpx">
									{{ `${index == info?.s_split.length - 1 ? '' : '-'} ` }}
								</view>
							</template>
						</view>
					</template>
					<input v-else :hold-keyboard="true"
						:class="showCuowu == 1 ? 'actuve' : showCuowu == 2 ? 'default' : ''" class="xian"
						:focus="current == 2" v-model="value" type="text" />
					<view class="label">
						<view class="itemss" style="text-align: center; margin: 10rpx 0"
							v-for="(item, index) in info?.tran_memo" :key="index">
							{{ item }}
						</view>
					</view>
					<view class="texts" @touchend.prevent="play()">
						<image src="/static/img/laba.png" class="laba" style="width: 40rpx; height: 40rpx"></image>
					</view>
					<view class="textss uni-row">
						<image @touchend.prevent="showTishi = !showTishi" @click.stop="showTishi = !showTishi" :src="
                                !showTishi
                                    ? '/static/img/wolrd/tishihei.png'
                                    : '/static/img/wolrd/liangtishi.png'
                            " class="tishis"></image>
						<view class="yinbiao uni-row" @touchend.prevent="play()" v-show="showTishi">
							/
							<view class="uni-row" v-for="(item, index) in info?.s_split" :key="index">
								{{ item[Object.keys(item)[0]].phonetic }}
							</view>
							/
						</view>
						<image @touchend.prevent="duima" src="/static/img/wolrd/duila.png" class="laba">
						</image>
					</view>
				</view>
			</swiper-item>
		</swiper>
	</view>
	<view class="waimiande uni-row" v-if="center" @click="guanbi">
		<view class="wais uni-row">
			<video :enable-play-gesture="false" class="video" :autoplay="true" id="demoVideo"
				:show-center-play-btn="false" :controls="false" object-fit="contain"
				:src="`https://os.y15926.com/phonetic/soundmark/video_en/${selectBiao}.mp4 `">
				<cover-view class="tupian-wai" @click="dianji">
					<cover-image @click="plays" :style="{ top: status == 1 ? '50%' : '-20%' }" class="controls-play img"
						src="/static/img/play.png"></cover-image>
					<cover-image @click="playTuo" :style="{ top: status == 3 ? '50%' : '-20%' }"
						class="controls-pause img" src="/static/img/zanting.png"></cover-image>
				</cover-view>
			</video>
		</view>
	</view>
</template>

<style scoped lang="less">
	.wrap {
		background: url('/static/img/wolrd/xue.png');
		background-size: 100% 100%;

		.header-wrap {
			justify-content: space-between;
			padding-left: 24rpx;
			padding-right: 28rpx;

			.left {
				width: 48rpx;
			}

			.title {
				font-weight: 500;
				font-size: 32rpx;
				color: #333333;
			}
		}

		.select-wrap {
			margin: 0 28rpx;
			background: url('/static/img/wolrd/liucheng.png');
			background-size: 100% 100%;
			height: 140rpx;

			.top-slider {
				padding: 28rpx 0 0;
				justify-content: center;

				.zi {
					font-size: 28rpx;
					transition: 0.3s all;

					&.active {
						color: #ffffff;
					}

					&.default {
						color: #dfddfb;
					}
				}

				.icon {
					width: 40rpx;
				}

				.xian {
					width: 96rpx;
					height: 2rpx;
					background-color: #fff;
					margin: 0 20rpx;
				}
			}

			.di {
				width: 468rpx;
				margin: 0 auto;
				justify-content: space-between;
				padding-top: 8rpx;

				.zi {
					&:nth-child(2) {}

					&.active {
						color: #fff;
					}
				}
			}
		}

		.danci {
			background: #ffffff;
			border-radius: 32rpx;
			padding: 42rpx 0 40rpx 0;

			.danci-top {
				justify-content: center;
			}

			.danci-bg {
				display: inline-block;
				height: 188rpx;
				margin-top: -45rpx;
				margin-bottom: -40rpx;
				font-size: 52rpx;
				padding: 52rpx 60rpx 0;
				background: url('/static/img/wolrd/sixiansange.png');
				background-size: cover;
				background-position: center;

				text {
					&.actives {
						color: #222868;
					}

					&.defaults {
						color: #fa862c;
					}
				}
			}
		}

		.center {
			justify-content: center;
			margin-top: 36rpx;

			.left {
				padding: 0 20rpx;
				justify-content: space-between;
				height: 62rpx;
				background: #f2f2f2;
				border-radius: 8rpx;

				.dancide {
					font-size: 24rpx;
					color: #999999;
					margin-right: 4rpx;
				}

				.huise {
					width: 40rpx;
				}
			}

			.huatong {
				width: 48rpx;
				height: 48rpx;
				margin: 0 16rpx 0 20rpx;
			}

			.shexiangji {
				width: 48rpx;
				height: 48rpx;
			}
		}

		.label {
			flex-wrap: wrap;
			margin: 16rpx 0 24rpx;
			text-align: center;
			font-size: 24rpx;
			color: #999999;

			.itemss {
				&:nth-child(1) {
					margin-right: 10rpx;
				}
			}
		}

		.wai {
			justify-content: center;

			.footer {
				justify-content: center;
				flex-wrap: wrap;
				padding: 8rpx 6rpx;
				margin: 0 auto;
				background: #f0f0f0;
				border-radius: 16rpx;

				.item {
					justify-content: center;
					margin: 0 2rpx;
					height: 48rpx;
					line-height: 48rpx;
					padding: 0 12rpx;
					min-width: 88rpx;
					background: #ece2ff;
					border-radius: 8rpx;
					font-size: 28rpx;
					color: #8875ac;
					border: 1rpx solid transparent;
					box-shadow: 0rpx 2rpx 4rpx 0rpx rgba(0, 0, 0, 0.27);

					&.active {
						border: 1rpx solid #b4aac7;
					}
				}
			}
		}

		.pindus {
			margin-top: 16rpx;
			padding: 32rpx 20rpx 40rpx;
			background: #fffbf7;
			border-radius: 32rpx;

			.title {
				justify-content: center;
				padding: 20rpx 0;
				width: 132rpx;
				height: 46rpx;
				background: #fff1e1;
				border-radius: 8rpx;
				font-size: 24rpx;
				color: #ff9e30;
			}

			.list {
				justify-content: center;
				flex-wrap: wrap;
				margin: 8rpx auto 0;

				.item {
					background: #ece2ff;
					border-radius: 6rpx;
					justify-content: center;
					margin: 0 6rpx;
					// padding: 0 30rpx;
					flex: 1;
					height: 50rpx;
					box-shadow: 0rpx 2rpx 4rpx 0rpx rgba(0, 0, 0, 0.27);

					&.active {
						color: #fa862c;
					}

					&.default {
						color: #333;
					}

					&.actives {
						color: #222868;
					}

					&.defaults {
						color: #fa862c;
					}

					&.xiao {
						font-size: 24rpx;
						color: #333333;
					}
				}
			}

			.rights {
				justify-content: center;
				min-width: 120rpx;
				height: 56rpx;
				background: #f6f1ff;
				border-radius: 8rpx;

				.yinbiao {
					font-size: 28rpx;
					color: #999999;
				}

				.she {
					width: 48rpx;
					height: 48rpx;
				}
			}

			.left {
				flex: 1;
			}

			.liss {
				justify-content: center;
				margin: 20rpx auto;

				.item {
					padding: 6rpx 16rpx;
					align-items: center;
					justify-content: center;
					min-width: 136rpx;
					min-height: 118rpx;
					background: #ffffff;
					border-radius: 8rpx;
					border: 1rpx solid #b4aac7;
					color: #796b94;
					box-shadow: 0rpx 2rpx 4rpx 0rpx rgba(0, 0, 0, 0.27);

					.titles {
						font-size: 28rpx;
					}

					.labels {
						margin-top: 4rpx;
						font-size: 24rpx;
					}
				}

				.jia {
					font-size: 32rpx;
					color: #333333;
					margin: 0 10rpx;
				}
			}

			.text-wrap {
				margin-top: 12rpx;
				font-size: 22rpx;
				color: #796b94;
				text-align: center;
			}

			.son-swiper {
				margin-top: 26rpx;
				height: 240rpx;

				/deep/ .uni-swiper-dots-horizontal {
					bottom: 0rpx;
				}

				.swiper-item {
					text-align: center;

					.titltess {
						justify-content: center;
						margin-top: 10rpx;
						font-size: 28rpx;
						color: #796b94;

						text {
							margin: 0 4rpx;

							&.active {
								color: red;
							}

							&.default {
								color: #fa862c;
							}

							&.defaults {
								color: #22ac38;
							}
						}
					}

					.labels {
						margin-top: 14rpx;
						font-size: 22rpx;
						color: #796b94;
					}

					.imgs {
						margin-top: 32rpx;
						justify-content: center;

						.item {
							justify-content: center;
							width: 88rpx;
							height: 48rpx;
							background: #ece2ff;
							border-radius: 8rpx;
							font-size: 24rpx;
							color: #8875ac;
							box-shadow: 0rpx 2rpx 4rpx 0rpx rgba(0, 0, 0, 0.27);

							image {
								height: 32rpx;
								width: 32rpx;
							}
						}
					}
				}
			}
		}
	}

	.xindes {
		padding-bottom: 0rpx;
	}

	.yanse {
		background-color: rgba(0, 0, 0, 0.4) !important;
	}

	.swiper-items {
		.xiamian {
			position: relative;
			background: #ffffff;
			border-radius: 32rpx 32rpx 0 0;
			padding-top: 128rpx;

			.labasss {
				position: absolute;
				top: 128rpx;
				right: 60rpx;
				z-index: 33;
				width: 42rpx;
				height: 42rpx;
			}

			.headers {
				justify-content: center;

				&.actuve {
					.item {
						border-bottom: 4rpx solid #f56c6c;
					}
				}

				&.default {
					.item {
						border-bottom: 4rpx solid #67c23a;
					}
				}

				.item {
					padding: 4rpx 4rpx;
					min-width: 120rpx;
					height: 80rpx;
					text-align: center;
					margin: 0 10rpx;
					font-size: 54rpx;
					border-bottom: 4rpx solid #000;

					&.actives {
						color: #222868;
					}

					&.defaults {
						color: #fa862c;
					}

				}
			}

			.imss {
				padding: 0 74rpx;
				text-align: right;
				margin-top: 120rpx;

				.shanchu {
					width: 56rpx;
					height: 56rpx;
				}
			}

			.label {
				margin-top: 50rpx;
			}

			.footer {
				margin-top: 40rpx;
				padding: 0 74rpx;
				justify-content: space-between;
				flex-wrap: wrap;

				.item {
					justify-content: center;
					width: 168rpx;
					height: 80rpx;
					background: #f8f3ff;
					box-shadow: 0rpx 2rpx 4rpx 0rpx rgba(0, 0, 0, 0.27);
					border-radius: 16rpx;
					font-size: 54rpx;

					&.actives {
						color: #222868;
					}

					&.defaults {
						color: #fa862c;
					}
				}
			}

			.xian {
				width: 546rpx;
				margin: 0 auto;
				font-weight: 500;
				font-size: 84rpx;
				height: 96rpx;
				text-align: center;
				color: #333333;
				padding-bottom: 12rpx;
				border-bottom: 8rpx solid #979797;

				&.actuve {
					border-bottom: 8rpx solid #f56c6c;
				}

				&.default {
					border-bottom: 8rpx solid #67c23a;
				}
			}

			.texts {
				margin-top: 48rpx;
				text-align: center;

				.laba {
					width: 48rpx;
					height: 48rpx;
				}
			}

			.textss {
				margin-top: 48rpx;
				padding-right: 48rpx;
				padding-left: 48rpx;
				justify-content: space-between;

				.tishis {
					width: 48rpx;
					height: 48rpx;
				}

				.yinbiao {
					font-weight: 400;
					font-size: 24rpx;
					color: #999999;
				}

				.laba {
					width: 48rpx;
					height: 48rpx;
				}
			}

			.gaibainla {
				justify-content: center;
			}

			.morebde {
				justify-content: center;
			}
		}
	}

	.waimiande {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		top: 0;
		z-index: 555;
		justify-content: center;
		background: rgba(0, 0, 0, 0.4);
		transition: 0.2s all;

		.wais {
			position: fixed;
			left: 50%;
			top: 50%;
			z-index: 555;
			transform: translate(-50%, -50%);
			padding: 40rpx 0rpx;
			border-radius: 30rpx;
			overflow: hidden;
			justify-content: center;
			background-color: #000;

			.video {
				width: 664rpx;
			}

			.tupian-wai {
				width: 664rpx;
				height: 100%;
			}

			.controls-play,
			.controls-pause {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);

				&.img {
					width: 80rpx;
					height: 80rpx;
				}
			}
		}
	}
</style>